<template>
    <div>
        <div style="width:100%" v-if="authentication" class="authentication-before">
            <h1 class="title">{{$t('message.Mention')}}</h1>
            <p class="top">{{$t('message.followin')}}</p>
            <div class="authentication-list">
                <div class="authentication-list-left">
                    <span v-if="userMsg.phoneNo==''?true:false">
                        <img src="../../assets/images/ctb/youxiang cai.png" alt />
                        <img src="../../assets/images/ctb/youxiang wei.png" alt />
                    </span>
                    <span v-else>
                        <img src="../../assets/images/ctb/youxiang wei.png" alt />
                        <img src="../../assets/images/ctb/youxiang cai.png" alt />
                    </span>
                    <span>{{$t('message.Email')}}</span>
                </div>
                <div class="authentication-list-right">
                    <span v-if="userMsg.phoneNo==''?true:false">{{$t('message.Tosetup')}}</span>
                    <span v-else class="spanColor">{{$t('message.binding')}}</span>
                </div>
            </div>
            <div class="authentication-list">
                <div class="authentication-list-left">
                    <span v-if="userMsg.authorizeLevel==1 || userMsg.authorizeLevel==2 ?false:true">
                        <img src="../../assets/images/ctb/youxiang cai.png" alt />
                        <img src="../../assets/images/ctb/youxiang wei.png" alt />
                    </span>
                    <span v-else>
                        <img src="../../assets/images/ctb/youxiang wei.png" alt />
                        <img src="../../assets/images/ctb/youxiang cai.png" alt />
                    </span>
                    <span>{{$t('message.authentication')}}</span>
                </div>
                <div class="authentication-list-right">
                    <span
                        v-if="userMsg.authorizeLevel==1 || userMsg.authorizeLevel==2 ?false:true"
                        @click="toMsgAuthen"
                    >{{$t('message.Tosetup')}}</span>
                    <span v-else class="spanColor">{{$t('message.binding')}}</span>
                </div>
            </div>
            <div class="authentication-list">
                <div class="authentication-list-left">
                    <span v-if="userMsg.authorizeLevel==2?false:true">
                        <img src="../../assets/images/ctb/youxiang cai.png" alt />
                        <img src="../../assets/images/ctb/youxiang wei.png" alt />
                    </span>
                    <span v-else>
                        <img src="../../assets/images/ctb/youxiang wei.png" alt />
                        <img src="../../assets/images/ctb/youxiang cai.png" alt />
                    </span>
                    <span>{{$t('message.identity')}}</span>
                </div>
                <div class="authentication-list-right">
                    <span
                        @click="reminder"
                        v-if="userMsg.authorizeLevel==2?false:true"
                    >{{$t('message.Tosetup')}}</span>
                    <span v-else class="spanColor">{{$t('message.binding')}}</span>
                </div>
            </div>
        </div>
        <div v-else class="authentication-after">
            <div class="charge-top" v-loading="loading">
                <h1 class="title">{{$t('message.Mention')}}</h1>
                <div class="queding">
                    <div style="position:absolute;margin-top:30px">
                        <el-select
                            @change="getBiMoney"
                            v-model="value"
                            :placeholder="$t('message.select')"
                        >
                            <el-option
                                v-for="item in biMsg"
                                :key="item.id"
                                :label="item.virtualWalletName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                        <el-select v-if="value2Show" v-model="value2">
                            <el-option
                                v-for="item in biCapital.virtualWallet.protocolsList"
                                :key="item"
                                :label="item"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </div>
                    <!-- 选择币种BTC -->
                    <div v-show="currentSize=='1'?true:false" class="moneey">
                        <dl
                            @click="getBi(index,item.id)"
                            :class="[biColor==index?'chooseColor':'']"
                            v-for="(item,index) in biMsg"
                            :key="index"
                        >{{item.virtualWalletName}}</dl>
                    </div>
                    <!-- 选择币种后 -->
                    <div
                        v-if="currentSize=='2' || currentSize=='3' ?true:false"
                        class="choose-after"
                    >
                        <div class="b-detail">
                            <div>
                                <span>{{$t('message.available')}}</span>
                                <span>{{biCapital.userVirtualWallet.availableAmount}}</span>
                            </div>
                            <div>
                                <span>{{$t('message.freeze')}}</span>
                                <span>{{biCapital.userVirtualWallet.freezeAmount}}</span>
                            </div>
                            <div>
                                <span>{{$t('message.total')}}</span>
                                <span>{{biCapital.userVirtualWallet.availableAmount+biCapital.userVirtualWallet.freezeAmount}}</span>
                            </div>
                        </div>
                        <div class="deposit">
                            <div class="deposit-left">
                                <el-form ref="form" :model="form" label-width="80px">
                                    <el-form-item :label="$t('message.Mentionmoney')">
                                        <el-input v-model="form.address"></el-input>
                                    </el-form-item>
                                </el-form>
                                <el-form ref="form" :model="form" label-width="80px">
                                    <el-form-item :label="$t('message.Addressnote')">
                                        <el-input
                                            v-model="form.message"
                                            :placeholder="$t('message.remark')"
                                        ></el-input>
                                    </el-form-item>
                                </el-form>
                                <el-form ref="form" :model="form" label-width="80px">
                                    <el-form-item :label="$t('message.acurrency')">
                                        <el-input
                                            v-model="form.number"
                                            :placeholder="biCapital.virtualWallet.withdrawMin | small"
                                        ></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="deposit-right">
                                <p>{{$t('message.book')}}</p>
                                <p @click="allBi">{{$t('message.Allmoney')}}</p>
                            </div>
                        </div>
                        <div class="handling">
                            <div>
                                <span>{{$t('message.Network')}}</span>
                                <span>{{biCapital.virtualWallet.withdrawHandlingFee}}</span>
                            </div>
                            <div>
                                <span>{{$t('message.account')}}</span>
                                <span>{{receiveNumber}} {{biCapital.virtualWallet.virtualWalletName}}</span>
                            </div>
                        </div>
                        <div class="handling-btn" @click="sponsor">{{$t('message.determine')}}</div>
                        <div class="buy-right">
                            <p>{{$t('message.notes')}}</p>
                            <p>1、{{$t('message.request')}}；</p>
                            <p>2、{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.single')}}{{biCapital.virtualWallet.withdrawMin}} {{biCapital.virtualWallet.virtualWalletName}},{{$t('message.hand')}}{{biCapital.virtualWallet.withdrawHandlingFee}}{{biCapital.virtualWallet.virtualWalletName}}；</p>
                            <!-- <p>3、24小时所币种提币总额上限为50BTC,达到10BTC每笔提币均需要提交视频验证，当前已用0BTC。</p> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="charge-bottom">
                <h1 class="title" style="font-size:14px;">
                    <span>{{$t('message.moneyrecord')}}</span>
                    <span @click="getRecord('')">{{$t('message.withdrawal')}}</span>
                </h1>
                <!-- 表格 -->
                <el-table
                    v-loading="loadingTwo"
                    :data="tableData"
                >
                    <el-table-column prop="createTime" :label="$t('message.time')" min-width="130"></el-table-column>
                    <el-table-column
                        prop="virtualWalletWithdrawAddress"
                        :label="$t('message.addresss')"
                        min-width="130"
                    ></el-table-column>
                    <el-table-column
                        prop="virtualWalletName"
                        :label="$t('message.types')"
                        min-width="50"
                    ></el-table-column>
                    <el-table-column
                        prop="virtualWalletWithdrawNumber"
                        :label="$t('message.number')"
                        min-width="80"
                    ></el-table-column>
                    <el-table-column
                        prop="tradeStatusDesc"
                        :label="$t('message.Filling')"
                        min-width="80"
                    ></el-table-column>
                    <el-table-column prop="typeDesc" :label="$t('message.Stateof')" min-width="80"></el-table-column>
                    <el-table-column prop="state" :label="$t('message.operation')" min-width="50">
                        <template slot-scope="scope">
                            <span
                                style="color:#7197ff"
                                @click="seeMore(scope.row.id)"
                            >{{$t('message.Toview')}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @current-change="pages"
                    :page-size="5"
                    background
                    layout="prev, pager, next"
                    :total="totals"
                ></el-pagination>
            </div>
        </div>
        <!-- 弹框 -->
        <div class="codeShow" v-show="codeShow" @click="codeShow = false">
            <div class="contents">
                <div>
                    <span>{{$t('message.Mentionmo')}}：</span>
                    <span>{{codeShowMsg.virtualWalletName}}</span>
                </div>
                <div>
                    <span>{{$t('message.acurrency')}}:</span>
                    <span>{{codeShowMsg.virtualWalletWithdrawNumber}}</span>
                </div>
                <!-- <div>
                <span>链名称：</span>
                <span>{{codeShowMsg.virtualWalletName}}</span>
                </div>-->
                <div>
                    <span>{{$t('message.Mentionmoney')}}：</span>
                    <span>{{codeShowMsg.virtualWalletWithdrawAddress}}</span>
                </div>
                <div>
                    <span>TIXD：</span>
                    <span>{{codeShowMsg.txHash}}</span>
                </div>
                <div>
                    <span>{{$t('message.time')}}：</span>
                    <span>{{codeShowMsg.createTime}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import QRCode from "qrcodejs2";
import qs from "qs";
// import {
//     listVirtualWallet,
//     getUserVirtualWalletInfo,
//     getUserRechargeList,
//     askForWithdraw,
//     showDetail
// } from "../../api/api";
export default {
    data() {
        return {
            value2Show: false,
            value2: "",
            page: 1,
            totals: 1,
            codeShow: false,
            codeShowMsg: "",
            userMsg: JSON.parse(sessionStorage.getItem("user")),
            authentication: true,
            loadingTwo: false,
            loading: false,
            token: sessionStorage.getItem("token"),
            //列表
            tableData: [],
            currentSize: "1",
            biMsg: [], //币种信息
            value: "", //所选币种值
            biColor: "-1", //判断颜色选择
            biCapital: [], //对应币种资金
            receiveNumber: "0.000",
            form: {
                address: "",
                message: "",
                number: ""
            }
        };
    },
    watch: {
        "form.number"() {
            if (this.form.number == "") {
                return false;
            }
            var number =
                this.form.number -
                this.biCapital.virtualWallet.withdrawHandlingFee;
            if (number <= 0) {
                this.$message({
                    message: this.$t("message.withdrawn")
                });
                return false;
            }
            this.receiveNumber = number;
        }
    },
    filters: {
        small(val) {
            return "最下提币数量为" + val;
        }
    },
    created() {
        this.getAllBi();
        this.getRecord();
        this.orAuthentication();
    },
    mounted() {},
    methods: {
        pages(val) {
            console.log(val, 202020);
            this.page = val;
            this.getRecord(this.value);
        },
        //查看详情
        seeMore(id) {
            var params = {
                token: JSON.parse(this.token),
                id: id
            };
            showDetail(qs.stringify(params)).then(res => {
                console.log(res.data, 77777);
                this.codeShowMsg = res.data.data;
                this.codeShow = true;
            });
        },
        //跳转信息认证
        toMsgAuthen() {
            this.$router.push({
                path: "/account"
            });
        },
        //提示身份认证
        reminder() {
            this.$message({
                message: this.$t("message.downloada")
            });
        },
        // 判断是否全部认证
        orAuthentication() {
            if (
                this.userMsg.phoneNo != "" &&
                this.userMsg.authorizeLevel == 2
            ) {
                this.authentication = false;
            } else {
                this.authentication = true;
            }
        },
        //获取提币记录
        getRecord(num) {
            this.loadingTwo = true;
            var params = {
                token: JSON.parse(this.token),
                virtualWalletId: num,
                type: "2",
                page: this.page,
                rows: 5
            };
            getUserRechargeList(qs.stringify(params)).then(res => {
                console.log(res.data, 333);

                if (res.data.code == 200) {
                    this.tableData = res.data.data;
                    this.totals = res.data.count;
                    console.log(this.totals, 2525);
                    this.loadingTwo = false;
                }
            });
        },
        //全部提币参数
        allBi() {
            this.form.number = this.biCapital.userVirtualWallet.availableAmount;
            console.log(this.form.number);
        },
        //发起提币
        sponsor() {
            if (this.form.address == "" || this.form.number == "") {
                this.$message({
                    message: this.$t("message.cannot")
                });
                return false;
            }
            if (
                this.form.number >
                    this.biCapital.userVirtualWallet.availableAmount ||
                this.form.number < 0.01
            ) {
                this.$message({
                    message: this.$t("messagecorrect")
                });
                return false;
            }
            var params = {
                token: JSON.parse(this.token),
                virtualWalletId: this.value,
                coinNumber: this.form.number,
                toAddress: this.form.address,
                remark: this.form.message,
                protocol: this.value2
            };
            askForWithdraw(qs.stringify(params))
                .then(res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        this.$message({
                            message: this.$t("message.Successful")
                        });
                        this.getRecord(this.value);
                    } else {
                        this.$message({
                            message: res.data.msg
                        });
                    }
                })
                .catch(err => {
                    this.$message({
                        message: this.$t("message.Parameter")
                    });
                });
        },
        //获取币种资产
        getBiMoney(val) {
            this.loading = true;
            var params = {
                token: JSON.parse(this.token),
                virtualWalletId: this.value
            };
            console.log(this.value2Show, 6666666666666666666);
            getUserVirtualWalletInfo(qs.stringify(params)).then(res => {
                if (res.data.code == 200) {
                    this.biCapital = res.data.data;
                    console.log(this.biCapital, 2222);
                    this.currentSize = "2";
                    this.loading = false;
                    this.getRecord(this.value);
                    this.form.number = "";
                    if (this.value == "234313") {
                        this.value2 = this.biCapital.virtualWallet.protocolsList[0];
                        this.value2Show = true;
                    } else {
                        this.value2 = "";
                        this.value2Show = false;
                    }
                } else {
                    this.$message({
                        message: res.data.msg
                    });
                }
            });
        },
        //币种颜色切换
        getBi(index, id) {
            this.biColor = index;
            this.value = id;
            this.getBiMoney();
        },
        // 获取币种
        getAllBi() {
            this.loading = true;
            listVirtualWallet().then(res => {
                console.log(res.data, 8888);
                this.biMsg = res.data.data;
                this.loading = false;
            });
        }
    }
};
</script>
<style lang="less" scoped>
.codeShow {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    .contents {
        width: 450px;
        padding: 40px 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        margin: 100px auto;
        > div {
            margin-bottom: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            font-weight: bold;
            > span:first-child {
                color: #8c979d;
            }
        }
        div:last-child {
            margin-bottom: 0;
        }
    }
}
.charge-top {
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.title {
    font-size: 18px;
    font-weight: 700;
    background: rgba(247, 247, 251, 1);
    line-height: 40px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    span:last-child {
        font-size: 12px;
        color: #6881ff;
        margin-right: 20px;
        font-weight: normal;
    }
}
.queding {
    background: rgba(255, 255, 255, 1);
    padding: 10px 30px;
    box-sizing: border-box;
    margin: 30px 0;
    .chooseColor {
        background-color: #6881ff;
        border: 1px solid #6881ff;
        color: #fff !important;
    }
    .moneey {
        display: flex;
        margin-top: 110px;
        font-size: 14px;
        dl {
            color: #8c979d;
            padding: 6px 15px;
            border-radius: 20px;
            border: 1px solid #e6e6e6;
            margin-right: 10px;
        }
    }
}
.charge-bottom {
    border: 1px solid #eee;
    padding-bottom: 10px;
}
// 后
.choose-after {
    margin-top: 90px;
    .b-detail {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 30px 0 40px;
        div {
            margin-right: 30px;
            font-size: 14px;
            color: #2d2f56;
            span:first-child {
                color: #6881ff;
                font-weight: bold;
                font-size: 14px;
                margin-right: 10px;
            }
        }
    }
    .deposit {
        border-top: 1px solid #eee;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        .deposit-left {
            width: 90%;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .deposit-right {
            width: 10%;
            p {
                margin-top: 15px;
                text-align: center;
            }
            > p:last-child {
                padding-top: 95px;
            }
        }
    }
}
.handling {
    width: 80%;
    margin: 0 auto;
    border-radius: 1px solid #fafbff;
    background-color: #fafbff;
    border-radius: 10px;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #2d2f56;
    span:first-child {
        margin-right: 20px;
        color: #8c979d;
    }
}
.handling-btn {
    width: 80%;
    padding: 14px 0;
    background-color: #6881ff;
    text-align: center;
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
    margin: 30px auto;
}
.buy-right {
    padding: 10px;
    box-sizing: border-box;
    p:first-child {
        font-size: 14px;
        font-weight: bold;
        color: #2d2f56;
        margin-bottom: 20px;
    }
    p {
        font-size: 12px;
        margin-bottom: 10px;
        color: #8c979d;
        line-height: 18px;
    }
}
//认证前
.authentication-before {
    .top {
        font-size: 12px;
        color: #8c979d;
        margin: 50px auto;
        text-align: center;
    }
    .authentication-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        margin: 0 auto 50px;
        box-shadow: 0px 0px 10px 2px #eee;
        height: 82px;
        border-radius: 10px;
        overflow: hidden;
        .authentication-list-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
                margin-right: 40px;
                margin-left: 20px;
                font-weight: bold;
            }
        }
        .authentication-list-right {
            .spanColor {
                color: #1aa331;
                background-color: #fff;
            }
            span {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #7197ff;
                color: #fff;
                width: 100px;
                height: 82px;
            }
        }
    }
}
</style>

